<template>
  <div class="channel-edit">
    <van-cell>
      <div slot="title" class="title">我的频道</div>
      <van-button
          type="danger"
          plain
          round
          size="small"
          @click="isEdit=!isEdit">{{isEdit ? '完成' : '编辑'}}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
          class="grid-item"
          :class="{active:index===active}"
          :icon="(isEdit && index!==0) ? 'clear':''"
          v-for="(channels,index) in userChannels"
          :key="index"
          @click="onUserChannelClick(channels,index)"
          :text="channels.name"/>
    </van-grid>

    <van-cell>
      <div slot="title" class="title">频道推荐</div>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
          class="grid-item"
          v-for="(channels,index) in recommendChannels"
          :key="index"
          :text="channels.name"
      @click="onAdd(channels)"/>
    </van-grid>
    </div>
</template>

<script>
import {getAllChannels,addUserChannels,deleteUserChannels} from "@/api/article";
import {setItem} from '@/utils/storage'
import {mapState} from 'vuex'
import {getItem} from "@/utils/storage";


export default {
  name: "ChannelEdit",
  data(){
    return{
      channelsEdit:[],
      isEdit:false
    }
  },
  props:{
    userChannels:{
      type:Array,
      required:true
    },
    active:{
      type:Number,
      required: true
    }
  },
  created() {
    this.loadAllChannels()
  },
  methods:{
   async loadAllChannels(){
     const {data}=await getAllChannels()
     this.channelsEdit=data.data.channels
   },
    async onAdd(channels){
        this.userChannels.push(channels)
      console.log(this.userChannels);
      if (this.user){
          await addUserChannels({
            channels:[
              {id:channels.id,seq:this.userChannels.length}
            ]
          })
        }else {
          setItem('user-channels',this.userChannels)
        }
    },
    onUserChannelClick(channels,index){
      if (this.isEdit && index !==0){
        this.deleteChannel(channels,index)
      }else {
        this.switchChannel(index)
      }
    },
   async deleteChannel(channels,index){
     if (index<=this.active){
       this.$emit('update-active',this.active-1)
     }
      this.userChannels.splice(index,1)
      if (this.user){
        await deleteUserChannels(channels.id)
      }else {
        setItem('user-channels',this.userChannels)
      }
    },
    switchChannel(index){
      this.$emit('close')
      this.$emit('update-active',index)
    }
  },
  computed:{
    ...mapState(['user']),
    recommendChannels(){
     return this.channelsEdit.filter(channel=>{
       return !this.userChannels.find(user=>{
          return user.id==channel.id
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit{
  padding-top: 50px;
  .title{
    font-size: 16px;
    color: #333333;
  }
  .grid-item{
    width: 80px;
    height: 43px;
    /deep/.van-grid-item__content{
      background-color: #f4f5f6;
      .van-grid-item__text{
        font-size: 13px;
        color: #222;
        margin-top: 0;
      }
      /deep/.van-grid-item__icon{
        position: absolute;
        right: -7px;
        top: -5px;
        font-size: 20px;
        color: #ccc;
      }
    }
  }
  .active{
    /deep/.van-grid-item__text{
      color: red !important;
    }
  }
}
</style>